import React, { useState } from 'react';
import { 
  Input, 
  Button, 
  Table, 
  Space, 
  Tag, 
  Card,
  Row,
  Col
} from 'antd';
import { 
  SearchOutlined,
  CheckOutlined,
  PictureOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

// 申请数据类型
interface ApplicationType {
  key: string;
  name: string;
  taxId: string;
  industry: string;
  materials: number; // 申请资料数量
  status: 'pending' | 'approved' | 'rejected';
  applicationTime: string;
}

const Platform: React.FC = () => {
  const [searchText, setSearchText] = useState('');
  const [filterStatus, setFilterStatus] = useState<'pending' | 'approved' | 'rejected'>('pending');

  // 模拟申请数据
  const applicationData: ApplicationType[] = [
    {
      key: '1',
      name: 'Apple',
      taxId: '0XXXX',
      industry: '10',
      materials: 3,
      status: 'pending',
      applicationTime: '2025/5/1 17:05'
    },
    {
      key: '2',
      name: 'Apple',
      taxId: '0XXXX',
      industry: '10',
      materials: 1,
      status: 'pending',
      applicationTime: '2025/5/1 17:05'
    },
    {
      key: '3',
      name: 'Samsung',
      taxId: '1XXXX',
      industry: '15',
      materials: 2,
      status: 'approved',
      applicationTime: '2025/5/2 10:30'
    },
    {
      key: '4',
      name: 'Huawei',
      taxId: '2XXXX',
      industry: '12',
      materials: 4,
      status: 'rejected',
      applicationTime: '2025/5/3 14:20'
    }
  ];

  // 处理审核操作
  const handleReview = (record: ApplicationType) => {
    console.log('审核申请:', record);
  };

  // 表格列定义
  const columns: ColumnsType<ApplicationType> = [
    {
      title: '商家名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: '纳税识别号',
      dataIndex: 'taxId',
      key: 'taxId',
      width: 150,
    },
    {
      title: '所属行业',
      dataIndex: 'industry',
      key: 'industry',
      width: 100,
    },
    {
      title: '申请资料',
      dataIndex: 'materials',
      key: 'materials',
      width: 120,
      render: (materials: number) => (
        <Space size="small">
          {Array.from({ length: materials }, (_, index) => (
            <PictureOutlined 
              key={index} 
              style={{ 
                fontSize: '16px', 
                color: '#1890ff',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                padding: '2px'
              }} 
            />
          ))}
        </Space>
      ),
    },
    {
      title: '申请状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => {
        const statusConfig = {
          pending: { color: 'blue', text: '待审核' },
          approved: { color: 'green', text: '已通过' },
          rejected: { color: 'red', text: '未通过' }
        };
        const config = statusConfig[status as keyof typeof statusConfig];
        return (
          <Tag color={config.color}>
            {config.text}
          </Tag>
        );
      },
    },
    {
      title: '申请时间',
      dataIndex: 'applicationTime',
      key: 'applicationTime',
      width: 150,
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (_, record) => (
        <Button
          type="text"
          icon={<CheckOutlined />}
          onClick={() => handleReview(record)}
          style={{ 
            backgroundColor: '#f5f5f5',
            border: '1px solid #d9d9d9',
            borderRadius: '4px',
            color: '#666'
          }}
        />
      ),
    },
  ];

  // 根据筛选状态过滤数据
  const filteredData = applicationData.filter(item => {
    const matchesStatus = filterStatus === 'pending' ? item.status === 'pending' :
                         filterStatus === 'approved' ? item.status === 'approved' :
                         filterStatus === 'rejected' ? item.status === 'rejected' : true;
    
    const matchesSearch = searchText === '' || 
                         item.name.toLowerCase().includes(searchText.toLowerCase()) ||
                         item.taxId.toLowerCase().includes(searchText.toLowerCase());
    
    return matchesStatus && matchesSearch;
  });

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card style={{ borderRadius: '8px' }}>
        {/* 顶部搜索区域 */}
        <Row justify="space-between" align="middle" style={{ marginBottom: '16px' }}>
          <Col>
            <Space>
              <span style={{ fontSize: '16px', fontWeight: 'bold' }}>申请列表</span>
              <Input
                placeholder="Search"
                prefix={<SearchOutlined />}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                style={{ width: 300 }}
                allowClear
              />
            </Space>
          </Col>
        </Row>

        {/* 筛选按钮区域 */}
        <Row justify="space-between" align="middle" style={{ marginBottom: '16px' }}>
          <Col>
            <Space>
              <Button
                type={filterStatus === 'pending' ? 'primary' : 'default'}
                onClick={() => setFilterStatus('pending')}
                style={{ borderRadius: '6px' }}
              >
                待审核
              </Button>
              <Button
                type={filterStatus === 'approved' ? 'primary' : 'default'}
                onClick={() => setFilterStatus('approved')}
                style={{ borderRadius: '6px' }}
              >
                已通过
              </Button>
              <Button
                type={filterStatus === 'rejected' ? 'primary' : 'default'}
                onClick={() => setFilterStatus('rejected')}
                style={{ borderRadius: '6px' }}
              >
                未通过
              </Button>
            </Space>
          </Col>
        </Row>

        {/* 表格区域 */}
        <Table
          columns={columns}
          dataSource={filteredData}
          pagination={{
            total: filteredData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
          scroll={{ x: 800 }}
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default Platform; 